<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>表格测试</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta charset="utf-8">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all" charset="utf-8">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/style.css">
    <script src="${pageContext.request.contextPath}/layui/js/jquery-1.11.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/layui/layui.all.js"></script>
</head>


<body>
<div class="layui-main layui-bg-gray" id="d1"><%--主容器--%>
    <table id="demo" lay-filter="test" class="layui-bg-green"></table>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container" id="d2">
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
            <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
        </div>
    </script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-radius layui-btn-xs" lay-event="detail" >查看</a>
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit" >编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        <a href="${pageContext.request.contextPath}/ss/stuList.html" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="chakan">跳转</a>
    </script>
</div>

<script src="${pageContext.request.contextPath}/layui/layui.all.js" charset="utf-8"></script>
<script>
    var $ = layui.jquery;
    var layer = layui.layer;
    var element = layui.element;
    var util = layui.util;
    var table = layui.table;
    layui.use('table', function () {

        //第一个实例
        table.render({
            elem: '#demo'
            , toolbar: '#toolbarDemo'
            , height: 612
            , skin: 'line' //行边框风格
            , url: 'layui/json/table/demo2.json' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'},
                {field: 'id', title: 'ID', width: 100,sort: true,type:'numbers'}
                , {field: 'username',align:'center', title: '用户名', width: 100}
                , {field: 'amount',align:'center', title: '性别', width: 100}
                , {field: 'city',align:'center', title: '城市', width: 100}
                , {field: 'zone',align:'center', title: '签名', width: 100}
                , {field: 'street',align:'center', title: '积分', width: 100}
                , {field: 'address',align:'center', title: '评分', width: 100}
                , {field: 'house',align:'center', title: '职业', width: 100}
                , {fixed: 'right',align:'center',title: '操作', toolbar: '#barDemo', width: 180,fixed:'right'}
            ]],
            request:{
            /*    pageName: 'curr' //页码的参数名称，默认：page
                ,limitName: 'nums' //每页数据量的参数名，默认：limit*/
            },
            response:{
               /* statusName: 'status' //规定数据状态的字段名称，默认：code
                ,statusCode: 200 //规定成功的状态码，默认：0
                ,msgName: 'hint' //规定状态信息的字段名称，默认：msg
                ,countName: 'total' //规定数据总数的字段名称，默认：count
                ,dataName: 'rows' //规定数据列表的字段名称，默认：data*/
            }

        });


        //监听工具条
        table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'detail'){ //查看
                alert(layEvent)
            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){ //编辑
                alert(layEvent)
                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                    ,title: 'xxx'
                });
            }

        });

        table.on("toolbar(testbar)",function(obj){
            var data = obj.data;
        if(obj.event ==='getCheckData'){
            alert(ddd)
            layer.confirm('确认删除么', function(index) {
                $.ajax({
                    type: "post",
                    url: "${pageContext.request.contextPath}/dghyht/removeAnnualKeyProjects.html",//提供删除接口
                    data: "id="+data.ID,
                    dataType: "json",
                    success: function (data) {
                        var message = data.dataInfo;
                        var code = data.codeInfo;

                        if(0 == code){
                            layer.msg("删除成功",{icon: 1,time:1000});
                            table.reload("ProjectClassification",{
                                page:{
                                    curr: 1
                                }
                            });
                        } else if (obj.event ==='getCheckLength') {
                            layer.msg("删除失败",{icon: 1,time:1000});
                            return;
                        }else if (obj.event ==='getCheckLength') {
                            layer.msg("删除失败", {icon: 1, time: 1000});
                            return;
                        }
                    },
                    error: function () {
                        layer.msg("删除失败",{icon: 1,time:1000});
                    }
                })
            })

        }

        })
    });
</script>
</body>
</html>
